<template>
  <div class="container">
    <div class="ui-title">基础用法</div>
    <search v-model="value1"></search>

    <div class="ui-title">自定义右侧按钮</div>
    <search v-model="value2" rightText="取消" @rightClick="rightClick"></search>

    <div class="ui-title">自定义高度</div>
    <search v-model="value4" radius="35px" height="45px" inputHeight="32px"></search>

    <div class="ui-title">显示返回按钮</div>
    <search v-model="value4" radius="35px" goback></search>

    <div class="ui-title">自定义背景色</div>
    <search v-model="value3" background="#4fc08d" radius="35px"></search>
  </div>
</template>

<script>
import Search from "../../components/search";
export default {
  components: {
    Search,
  },
  data() {
    return {
      value1: '',
      value2: '',
      value3: '',
      value4: ''
    };
  },
  methods: {
    rightClick() {
      
    }
  },
};
</script>


<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #f7f8fa;
  overflow: hidden;
}
</style>